<template>
  <div class="menu-module section-container">
    <div class="section-title">模块管理</div>
    <div class="section-actions">
      <div class="actions-left">
        <el-button v-permission="['setting:menu:module:add']" type="primary" @click="handleAdd()">新增模块</el-button>
        <SearchCmp v-if="searchCmpArray.length" :searchCmpArray="searchCmpArray" :searchForm="queryData" @onSubmit="handleSearch" />
      </div>
    </div>
    <div class="table-box">
      <RuifoxTable :loading="tableLoading" :default-index="false" v-model:tableData="tableData" v-model:fieldList="fieldList">
        <template #options="{ element }">
          <div class="table-td-option">
            <el-button v-permission="['setting:menu:module:edit']" type="primary" link @click="handleEdit(element)">编辑</el-button>
            <el-button v-permission="['setting:menu:module:delete']" type="primary" link @click="handleDelete(element)">删除</el-button>
          </div>
        </template>
      </RuifoxTable>
      <div class="header-page">
        <PaginationView
          :total="queryData.total"
          :pageSize="queryData.pageSize"
          :currentPage="queryData.currentPage"
          :canChoose="false"
          @changeSize="handleSizeChange"
          @currentChange="handleCurrentChange"
          @refreshList="getTableData"
        />
      </div>
    </div>
    <el-dialog v-model="subAppDialog" :title="subAppTitle" width="700px">
      <el-form :model="subAppForm" ref="subAppRef" :rules="subAppRules" label-width="auto" style="max-width: 600px">
        <el-form-item label="菜单名称" prop="title">
          <el-input v-model="subAppForm.title" />
        </el-form-item>
        <el-form-item label="组件名称" prop="name">
          <el-input v-model="subAppForm.name" />
        </el-form-item>
        <el-form-item label="本地地址">
          <el-input v-model="subAppForm.devUrl" />
        </el-form-item>
        <el-form-item label="线上地址" prop="proUrl">
          <el-input v-model="subAppForm.proUrl" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="subAppDialog = false">取消</el-button>
          <el-button type="primary" @click="subAppSubmit(subAppRef)">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { getSubAppPage, insertSubApp, editSubApp, deleteSubApp } from '@/api/setting'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tableList as mixTable } from '@ruifox-cms/utils'

const {
  queryData,
  tableData,
  tableLoading,
  getTableData,
  handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handleResetPagination
} = mixTable({
  getListApi: getSubAppPage
})
onMounted(() => {
  handleSearch()
})

const fieldList = ref([
  {
    title: '模块id',
    name: 'id',
    width: 60
  },
  {
    title: '模块名称',
    name: 'name'
  },
  {
    title: '操作',
    width: 120,
    fixed: 'right',
    name: 'options'
  }
])

const subAppRules = reactive({
  title: [{ required: true, message: '请输入菜单名称', trigger: 'blur' }],
  name: [{ required: true, message: '请输入组件名称', trigger: 'blur' }],
  proUrl: [{ required: true, message: '请输入线上地址', trigger: 'blur' }]
})
const defaultQueryData = {
  title: '', //菜单名称
  name: '' //组件英文名
}
Object.assign(queryData, defaultQueryData)

// 重置
// const handleReset = () => {
//   Object.assign(queryData, structuredClone(defaultQueryData));
//   getTableData()
// }
tableData.value = []
// 新增
const defaultSubAppForm = {
  title: '', //菜单名称
  name: '', //组件名称,
  devUrl: '', //本地运行地址
  proUrl: '' //线上地址
}
const subAppForm = ref({})
const subAppTitle = ref('新增')
const subAppDialog = ref(false)
const handleAdd = () => {
  subAppTitle.value = '新增'
  subAppForm.value = structuredClone(defaultSubAppForm)
  subAppDialog.value = true
  if (subAppRef.value) subAppRef.value.clearValidate()
}

// 编辑
const handleEdit = data => {
  subAppForm.value = structuredClone(data)
  subAppTitle.value = '编辑'
  subAppDialog.value = true
}

// 删除
const handleDelete = async (row) => {
  ElMessageBox.confirm('此操作将删除该子系统, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    const data = {
      ids: [row.id],
      isAllChoose: false
    }
    let res = await deleteSubApp(data)
    if (res.code == 20000) {
      handleResetPagination()
      ElMessage({
        showClose: true,
        message: `删除成功`,
        type: 'success'
      })
      getTableData()
    }
  })
}

// 提交
const subAppRef = ref()
const subAppSubmit = async formEl => {
  if (!formEl) return
  await formEl.validate(async valid => {
    if (valid) {
      let res = null
      if (subAppForm.value.checked != null) delete subAppForm.value.checked
      if (subAppForm.value.id == null) {
        res = await insertSubApp(subAppForm.value)
      } else {
        res = await editSubApp(subAppForm.value)
      }
      if (res.code == 20000) {
        ElMessage({
          showClose: true,
          message: `${subAppTitle.value}成功`,
          type: 'success'
        })
        subAppDialog.value = false
        getTableData()
      }
    }
  })
}

const searchCmpArray = ref([{ label: '子系统名称', key: 'title' }])
</script>
<style scoped lang="scss">
.container {
  .table-box {
    .running-url {
      display: flex;
      flex-direction: column;
      a {
        span {
          color: $mainColor;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
</style>
